<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content-from">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="编号">
                    {{form.id}}
                </el-form-item>
                <el-form-item label="手机">
                    {{form.mobile}}
                </el-form-item>
                <el-form-item label="媒体名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="媒体简介">
                    <el-input v-model="form.intro"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                 <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存设置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <el-upload
                class="avatar-uploader"
                action="http://ttapi.research.itcast.cn/mp/v1_0/user/photo"
                :show-file-list="false"
                :http-request="uploadPhoto"
                >
                <img v-if="form.photo" :src="form.photo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            
        </div>
    </div>
</template>
<script>
import {api_profile,api_updatePhoto,api_updateProfile} from '@/api/user.js'
export default {
    data(){
        return{
            form:{},
            imgUrl:""
        }
    },
    methods:{
        onSubmit(){
            api_updateProfile({
                 name:this.form.name,
                 intro:this.form.intro,
                 email:this.form.email,
            }).then(res=>{
                console.log(res)
            })
        },
        getUserInfo(){
            api_profile().then((res)=>{
                console.log(res)
                if(res){
                    this.form = res.data.data
                }
            })
        },
        uploadPhoto(obj){
            console.log(obj)
            const { file } =obj
            const formData = new FormData()
            formData.append('photo',file)
            api_updatePhoto(formData).then(res=>{
                console.log(res)
                this.$message.success("上传成功")
                this.form.photo = res.data.data.photo
                this.eventBus.$emit('set-photo',this.form.photo)
            })

        }
    },
    mounted(){
        this.getUserInfo()

    }

}
</script>
<style scoped>
.content-from{
    width: 60%;
    height: 600px;
    float: left;
    padding-top: 20px;
}
.right{
    width: 40%;
    height: 620px;
    float: left;
    
}
.pohto{
    position: relative;
    margin-left: 50px;
    margin-top: 20px;
    width: 240px;
    height: 160px;
    font-size: 50px;
    padding-top: 90px;
    border: 1px solid #ccc;
    text-align: center;

}
.pohto_img{
    position: absolute;
    width: 240px;
    height: 250px;
    top: 0;
    left: 0;
}
</style>